<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4">
            <span @click="goHome">后台系统</span>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" :icon="is_collapse == true?'el-icon-right':'el-icon-back'" @click="is_collapse = !is_collapse">
            </el-button>
          </el-col>
          <el-col :span="12">
            <div class="right">
              <span class="name">您好,{{name}}</span>
              <el-button type="primary" style="margin-right:10px;" @click="logout">
                退出
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside :width="is_collapse == true?'64px':'200px'">
          <el-scrollbar style="height:100%">
            <div class="menus">
              <el-menu :default-active="$route.path" unique-opened :collapse="is_collapse" :collapse-transition="false">
                <el-submenu v-for="(item) in menuList" :key="item.id" :index="item.id + ''">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item v-for="(itemc) in item.children" :key="itemc.id" :index="itemc.router" @click="goto(itemc)">
                    <template slot="title">
                      <i :class="itemc.icon"></i>
                      <span>{{itemc.name}}</span>
                    </template>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <el-tabs v-model="$store.state.actIndex" type="card" closable @tab-click="tabClick" @tab-remove="removeTab">
            <el-tab-pane v-for="(item) in $store.state.list" :key="item.router" :label="item.title" :name="item.router" effect="dark"></el-tab-pane>
          </el-tabs>
          <keep-alive :include="$store.state.incNames">
            <router-view>
            </router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getMenus } from '@/network/api.js'
export default {
  name: 'home',
  data() {
    return {
      name: '', // 名称
      menuList: [], // 菜单
      is_collapse: false // 是否折叠
    }
  },
  async created() {
    try {
      const rtn = await getMenus({})
      this.name = rtn.info.name
      this.menuList = rtn.menus
      this.$storage.set('info', rtn.info)
      this.$store.commit('init')
    } catch (e) {
      return this.$message.error(e.message)
    }
  },
  methods: {
    goHome() {
      this.$store.commit('reset')
    },
    goto(data) {
      this.$store.commit('ascPath', data)
    },
    removeTab(targetName) {
      this.$store.commit('descPath', targetName)
    },
    tabClick(tab, event) {
      this.$store.commit('tabClick', tab.name)
    },
    logout() {
      this.$store.commit('reset')
      this.$storage.clear()
      this.$router.push('/login')
      this.$message.warning('您已安全退出')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-row .el-col .name {
  font-size: 16px;
  color: #fff;
  margin-right: 10px;
}
.el-aside {
  height: calc(100vh - 45px);
  border-right: solid 1px #e6e6e6;
}
.el-menu {
  border-right: none;
}
.menus {
  padding-bottom: 50px;
}
.el-header {
  height: 45px !important;
  padding: 0;
  background-color: #222;
}
.el-main {
  background-color: #f1f1f1;
  // padding: 0;
  // background-color: red;
}
/deep/ .el-menu-item,
/deep/ .el-submenu__title {
  font-size: 12px;
  line-height: 40px;
  height: 40px;
  background-color: #fff;
}
// /deep/.el-submenu__title:focus,
/deep/.el-submenu__title:hover,
/deep/.el-submenu__title.is-active,
// /deep/.el-menu-item:focus
/deep/.el-menu-item:hover,
/deep/.el-menu-item.is-active {
  background-color: #009688;
  color: #fff;
  i {
    color: #fff;
  }
}
/deep/.el-tabs__item.is-active,
/deep/.el-tabs__item:hover {
  background-color: #009688;
  color: #fff;
  i {
    color: #fff;
  }
}
.el-submenu .el-menu-item {
  min-width: auto;
}
.el-row {
  .el-col {
    line-height: 45px;
    span {
      padding-left: 20px;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
    }
  }
}
.menus {
  padding-right: 10px;
}
.el-main {
  // padding: 0;
  padding-top: 1px;
  overflow: hidden;
}
// .el-dropdown {
//   float: right;
//   margin-right: 20px;
// }
// .el-dropdown-link {
//   cursor: pointer;
//   color: #fff;
// }
// .el-icon-arrow-down {
//   font-size: 14px;
// }
// .el-submenu .el-menu-item {
//   font-size: 12px;
//   height: 40px;
//   line-height: 40px;
// }
// .el-submenu__title {
//   font-size: 12px;
//   line-height: 40px;
//   height: 40px;
// }
/deep/.el-tabs__item {
  font-size: 12px;
}
</style>
